آموزش طراحی وب سایت مدرن واکنش گرا CSS - ایجاد پنج وب سایت مختلف [ویدئو]

سرفصل ها و درس ها

اطلاعات دوره CSS CSS Course Information

• مقدمه ای بر شروع طراحی وب CSS برای دوره مبتدی Introduction to Getting Started with CSS Web Design for a Beginner's Course

• مقدمه ای بر شروع طراحی وب CSS برای دوره مبتدی Introduction to Getting Started with CSS Web Design for a Beginner's Course

• افزودن CSS به صفحه HTML خود از فایل CSS Adding CSS to Your HTML Page from CSS File

• افزودن CSS به صفحه HTML خود از فایل CSS Adding CSS to Your HTML Page from CSS File

• نحوه انتخاب عناصر صفحه CSS HTML صفحه انتخاب عنصر How to Select Page Elements CSS HTML Page Element Selection

• نحوه انتخاب عناصر صفحه CSS HTML صفحه انتخاب عنصر How to Select Page Elements CSS HTML Page Element Selection

• تنظیم رنگ برای متن و پس زمینه با CSS افزودن تصاویر به رنگ عناصر Setting Colors for Text and Backgrounds with CSS Adding Images to Elements Color

• تنظیم رنگ برای متن و پس زمینه با CSS افزودن تصاویر به رنگ عناصر Setting Colors for Text and Backgrounds with CSS Adding Images to Elements Color

• مدل جعبه CSS چیست و چگونه می توان حاشیه حاشیه برای عناصر را تنظیم کرد What Is the CSS Box Model and How to Set Border Margin Padding for Elements

• مدل جعبه CSS چیست و چگونه می توان حاشیه حاشیه برای عناصر را تنظیم کرد What Is the CSS Box Model and How to Set Border Margin Padding for Elements

• نحوه اعمال CSS برای تنظیم متن، طراحی و تغییر شکل قلم به متن How to Apply CSS to Text Setting Font Styling Text Decoration and Transformation

• نحوه اعمال CSS برای تنظیم متن، طراحی و تغییر شکل قلم به متن How to Apply CSS to Text Setting Font Styling Text Decoration and Transformation

• چگونه مقادیر نمایش عنصر را تنظیم کنیم و چه چیزی را نمایش نمی‌دهد در مقابل ویژگی دید How to Set the Element Display Values and What Display None Does Versus Visibility Property

• چگونه مقادیر نمایش عنصر را تنظیم کنیم و چه چیزی را نمایش نمی‌دهد در مقابل ویژگی دید How to Set the Element Display Values and What Display None Does Versus Visibility Property

• روش موقعیت CSS برای عنصر صفحه HTML مطلق نسبی ثابت استاتیک CSS Position Method for HTML Page Element Absolute Relative Fixed Static

• روش موقعیت CSS برای عنصر صفحه HTML مطلق نسبی ثابت استاتیک CSS Position Method for HTML Page Element Absolute Relative Fixed Static

• نحوه استفاده از Float برای تنظیم تصاویر در یک خط با متن و قرار دادن عناصر با CSS How to Use Float to Set Images in Line with Text and Position Elements with CSS

• نحوه استفاده از Float برای تنظیم تصاویر در یک خط با متن و قرار دادن عناصر با CSS How to Use Float to Set Images in Line with Text and Position Elements with CSS

• کلاس‌های شبه CSS برای جلوه‌های شناور و موارد دیگر. محتوای تعاملی CSS ایجاد کنید CSS Pseudo-Classes for Hover Effects and More; Create Interactive Content CSS

• کلاس‌های شبه CSS برای جلوه‌های شناور و موارد دیگر. محتوای تعاملی CSS ایجاد کنید CSS Pseudo-Classes for Hover Effects and More; Create Interactive Content CSS

• CSS شبه عناصر افزودن محتوا به عناصر صفحه با CSS Pseudo-Elements CSS Adding Content to Page Elements with CSS

• CSS شبه عناصر افزودن محتوا به عناصر صفحه با CSS Pseudo-Elements CSS Adding Content to Page Elements with CSS

• نحوه ایجاد یک قالب ساده با استفاده از طرح بندی شناور CSS با وب سایت سه ستونی CSS How to Create a Simple Template Using CSS Float Layout with CSS Three-Column Website

• نحوه ایجاد یک قالب ساده با استفاده از طرح بندی شناور CSS با وب سایت سه ستونی CSS How to Create a Simple Template Using CSS Float Layout with CSS Three-Column Website

• یک طرح بندی وب سایت سه ستونی با طراحی ساده طرح بندی CSS Flexbox ایجاد کنید Create a Three-column Website Layout with CSS Flexbox Simple Layout Design

• یک طرح بندی وب سایت سه ستونی با طراحی ساده طرح بندی CSS Flexbox ایجاد کنید Create a Three-column Website Layout with CSS Flexbox Simple Layout Design

• قالب وب سایت سه ستونی مدرن ریسپانسیو با طراحی طرح بندی سریع شبکه CSS Modern Responsive Three-Column Website Template with CSS Grid Quick Layout Design

• قالب وب سایت سه ستونی مدرن ریسپانسیو با طراحی طرح بندی سریع شبکه CSS Modern Responsive Three-Column Website Template with CSS Grid Quick Layout Design

ایجاد پنج وب سایت از ابتدا با استفاده از طراحی وب مدرن - HTML، CSS، جاوا اسکریپت Creating Five Websites from Scratch Using Modern Web Design – HTML, CSS, JavaScript

ایجاد پنج وب سایت از ابتدا با استفاده از طراحی وب مدرن - HTML، CSS، جاوا اسکریپت Creating Five Websites from Scratch Using Modern Web Design – HTML, CSS, JavaScript

• معرفی Introduction

• معرفی Introduction

• ابزار و منابع دوره Tools and Resources for the Course

• ابزار و منابع دوره Tools and Resources for the Course

وب سایت های واکنش گرا مدرن با استفاده از Float و CSS برای ایجاد شبکه های قابل استفاده مجدد Modern Responsive Websites Using Float and CSS to Create Reusable Grids

وب سایت های واکنش گرا مدرن با استفاده از Float و CSS برای ایجاد شبکه های قابل استفاده مجدد Modern Responsive Websites Using Float and CSS to Create Reusable Grids

• ایجاد یک وب سایت شناور تک صفحه ای با ساختار شبکه با استفاده از CSS Creating a Single-Page Float Website with a Grid Structure Using CSS

• ایجاد یک وب سایت شناور تک صفحه ای با ساختار شبکه با استفاده از CSS Creating a Single-Page Float Website with a Grid Structure Using CSS

• راه اندازی محیط توسعه وب شما Setting Up Your Web Development Environment

• راه اندازی محیط توسعه وب شما Setting Up Your Web Development Environment

• ایجاد یک وب سایت Wireframe برای برنامه ریزی سایت شما Creating a Website Wireframe to Plan Your Site

• ایجاد یک وب سایت Wireframe برای برنامه ریزی سایت شما Creating a Website Wireframe to Plan Your Site

• اضافه کردن ساختار اصلی HTML Adding the HTML Main Structure

• اضافه کردن ساختار اصلی HTML Adding the HTML Main Structure

• به روز رسانی HTML با Styles Updating HTML with Styles

• به روز رسانی HTML با Styles Updating HTML with Styles

• ایجاد یک نوار ناوبری پاسخگو Creating a Responsive Navbar

• ایجاد یک نوار ناوبری پاسخگو Creating a Responsive Navbar

• ایجاد نوار ناوبری پاسخگو برای موبایل Creating a Mobile-Ready Responsive Navbar

• ایجاد نوار ناوبری پاسخگو برای موبایل Creating a Mobile-Ready Responsive Navbar

• افزودن محتوای بیشتر به بخش بالای وب سایت شما Adding More Content to Your Website's Top Section

• افزودن محتوای بیشتر به بخش بالای وب سایت شما Adding More Content to Your Website's Top Section

• ایجاد یک شبکه CSS برای وب سایت خود با استفاده از Float Creating a CSS Grid for Your Website Using Float

• ایجاد یک شبکه CSS برای وب سایت خود با استفاده از Float Creating a CSS Grid for Your Website Using Float

• افزودن گالری تصاویر Adding an Image Gallery

• افزودن گالری تصاویر Adding an Image Gallery

• ایجاد مناطق محتوا - منطقه محتوای چند ستونی Creating Content Areas – Multiple Columns Content Area

• ایجاد مناطق محتوا - منطقه محتوای چند ستونی Creating Content Areas – Multiple Columns Content Area

• اضافه کردن یک ستون به یک شبکه Adding a Single Column to a Grid

• اضافه کردن یک ستون به یک شبکه Adding a Single Column to a Grid

• ایجاد فرم تماس با استفاده از CSS و HTML Creating a Contact Form Using CSS and HTML

• ایجاد فرم تماس با استفاده از CSS و HTML Creating a Contact Form Using CSS and HTML

• اضافه کردن Mailto به فرم تماس شما Adding Mailto to Your Contact Form

• اضافه کردن Mailto به فرم تماس شما Adding Mailto to Your Contact Form

• اضافه کردن یک سبک به وب سایت شما Adding a Style to Your Website

• اضافه کردن یک سبک به وب سایت شما Adding a Style to Your Website

• افزودن و جابجایی بخش ها در یک وب سایت تک صفحه ای Adding and Moving Sections in a Single-Page Website

• افزودن و جابجایی بخش ها در یک وب سایت تک صفحه ای Adding and Moving Sections in a Single-Page Website

• بررسی وب سایت تک صفحه ای Single-Page Website Review

• بررسی وب سایت تک صفحه ای Single-Page Website Review

وب سایت Flexbox تک صفحه ای با جاوا اسکریپت اسکرول خودکار Single-Page Flexbox Website with Auto-scroll JavaScript

وب سایت Flexbox تک صفحه ای با جاوا اسکریپت اسکرول خودکار Single-Page Flexbox Website with Auto-scroll JavaScript

• معرفی وب سایت تک صفحه ای فلکس باکس Single-Page Flexbox Website Introduction

• معرفی وب سایت تک صفحه ای فلکس باکس Single-Page Flexbox Website Introduction

• وب سایت Flexbox: راه اندازی یک صفحه وب Flexbox Website: Setting Up a Webpage

• وب سایت Flexbox: راه اندازی یک صفحه وب Flexbox Website: Setting Up a Webpage

• ایجاد بخش ها در یک وب سایت تک صفحه ای با استفاده از Flexbox Creating Sections in a Single-Page Website Using Flexbox

• ایجاد بخش ها در یک وب سایت تک صفحه ای با استفاده از Flexbox Creating Sections in a Single-Page Website Using Flexbox

• ایجاد نوار ناوبری با استفاده از Flexbox Creating a Navbar Using Flexbox

• ایجاد نوار ناوبری با استفاده از Flexbox Creating a Navbar Using Flexbox

• طراحی و افزودن محتوا به بخش صفحه اصلی Designing and Adding Content to the Home Screen Section

• طراحی و افزودن محتوا به بخش صفحه اصلی Designing and Adding Content to the Home Screen Section

• استفاده از ستون های شبکه سفارشی خود با Flexbox Applying Your Own Custom Grid Columns with Flexbox

• استفاده از ستون های شبکه سفارشی خود با Flexbox Applying Your Own Custom Grid Columns with Flexbox

• ایجاد کارت های صفحه CSS Flexbox با Flexbox Creating CSS Flexbox Page Cards with Flexbox

• ایجاد کارت های صفحه CSS Flexbox با Flexbox Creating CSS Flexbox Page Cards with Flexbox

• ایجاد یک فرم CSS با استفاده از CSS Flexbox Creating a CSS Form Using CSS Flexbox

• ایجاد یک فرم CSS با استفاده از CSS Flexbox Creating a CSS Form Using CSS Flexbox

• ایجاد پاورقی Creating a Footer

• ایجاد پاورقی Creating a Footer

• ایجاد اسکرول صاف با استفاده از جاوا اسکریپت Creating Smooth Scrolling Using JavaScript

• ایجاد اسکرول صاف با استفاده از جاوا اسکریپت Creating Smooth Scrolling Using JavaScript

• افزودن اسکرول روان به وب سایت خود با استفاده از جاوا اسکریپت Adding Smooth Scrolling to Your Website Using JavaScript

• افزودن اسکرول روان به وب سایت خود با استفاده از جاوا اسکریپت Adding Smooth Scrolling to Your Website Using JavaScript

• بررسی وب سایت Flexbox تک صفحه ای Single-Page Flexbox Website Review

• بررسی وب سایت Flexbox تک صفحه ای Single-Page Flexbox Website Review

چک باکس "بدون جاوا اسکریپت" – وب سایت نوار ناوبری پاسخگو از ابتدا در بخش وب سایت شبکه CSS "No JavaScript" Checkbox – Responsive Navbar Website from Scratch in the CSS Grid Website Section

چک باکس "بدون جاوا اسکریپت" – وب سایت نوار ناوبری پاسخگو از ابتدا در بخش وب سایت شبکه CSS "No JavaScript" Checkbox – Responsive Navbar Website from Scratch in the CSS Grid Website Section

• معرفی وب سایت CSS Grid CSS Grid Website Introduction

• معرفی وب سایت CSS Grid CSS Grid Website Introduction

• آماده سازی طراحی شما – راه اندازی شبکه CSS Preparing Your Design – CSS Grid Setup

• آماده سازی طراحی شما – راه اندازی شبکه CSS Preparing Your Design – CSS Grid Setup

• ایجاد یک وب سایت – CSS Grid Creating a Website – CSS Grid

• ایجاد یک وب سایت – CSS Grid Creating a Website – CSS Grid

• ایجاد یک CSS Grid Responsive Navbar Creating a CSS Grid Responsive Navbar

• ایجاد یک CSS Grid Responsive Navbar Creating a CSS Grid Responsive Navbar

• اضافه کردن یک نوار ناوبری پاسخگو به وب سایت شما Adding a Responsive Navbar to Your Website

• اضافه کردن یک نوار ناوبری پاسخگو به وب سایت شما Adding a Responsive Navbar to Your Website

• ایجاد یک نوار ناوبری تاشو کاملاً پاسخگو Creating a Fully Responsive Collapsible Navbar

• ایجاد یک نوار ناوبری تاشو کاملاً پاسخگو Creating a Fully Responsive Collapsible Navbar

• افزودن محتوای جایگیر Adding Placeholder Content

• افزودن محتوای جایگیر Adding Placeholder Content

• به روز رسانی پاورقی صفحه Updating the Page Footer

• به روز رسانی پاورقی صفحه Updating the Page Footer

• بررسی وب سایت CSS Grid CSS Grid Website Review

• بررسی وب سایت CSS Grid CSS Grid Website Review

منوی جمع‌شونده جاوا اسکریپت – وب‌سایت CSS Float آماده برای موبایل و کاملاً پاسخگو JavaScript Collapsible Menu – Mobile-Ready and Fully Responsive CSS Float Website

منوی جمع‌شونده جاوا اسکریپت – وب‌سایت CSS Float آماده برای موبایل و کاملاً پاسخگو JavaScript Collapsible Menu – Mobile-Ready and Fully Responsive CSS Float Website

• مقدمه: وب سایت Float واکنش گرا Introduction: Responsive Float Website

• مقدمه: وب سایت Float واکنش گرا Introduction: Responsive Float Website

• وب سایت مدرن: راه اندازی و برنامه ریزی وب سایت Modern Website: Website Setup and Planning

• وب سایت مدرن: راه اندازی و برنامه ریزی وب سایت Modern Website: Website Setup and Planning

• ایجاد یک وب سایت مدرن: راه اندازی HTML اصلی Creating a Modern Website: Set Up Main HTML

• ایجاد یک وب سایت مدرن: راه اندازی HTML اصلی Creating a Modern Website: Set Up Main HTML

• ساخت نوار ناوبری پاسخگو با استفاده از CSS Navbar Styling Making a Responsive Navigation bar Using CSS Navbar Styling

• ساخت نوار ناوبری پاسخگو با استفاده از CSS Navbar Styling Making a Responsive Navigation bar Using CSS Navbar Styling

• ایجاد یک منوی جمع‌بندی پویا با استفاده از نوار ناوبری پاسخگو CSS Making a Dynamic Collapse Menu Using Responsive CSS Navbar

• ایجاد یک منوی جمع‌بندی پویا با استفاده از نوار ناوبری پاسخگو CSS Making a Dynamic Collapse Menu Using Responsive CSS Navbar

• منوی نوار ناوبری آماده برای موبایل با استفاده از نوار ناوبری پاسخگو CSS Mobile-Ready Navbar Menu Using Responsive CSS Navbar

• منوی نوار ناوبری آماده برای موبایل با استفاده از نوار ناوبری پاسخگو CSS Mobile-Ready Navbar Menu Using Responsive CSS Navbar

• افزودن جاوا اسکریپت را انتخاب کنید و به موارد منوی نوار نوار خود تغییر دهید Adding JavaScript Select and Toggle to Your Navbar Menu Items

• افزودن جاوا اسکریپت را انتخاب کنید و به موارد منوی نوار نوار خود تغییر دهید Adding JavaScript Select and Toggle to Your Navbar Menu Items

• شبکه پویا سفارشی - ایجاد یک وب سایت و ستون Custom Dynamic Grid – Creating a Website and Column

• شبکه پویا سفارشی - ایجاد یک وب سایت و ستون Custom Dynamic Grid – Creating a Website and Column

• افزودن محتوا و منابع متغیر مکان Adding Placeholder Content and Resources

• افزودن محتوا و منابع متغیر مکان Adding Placeholder Content and Resources

• بهترین منابع برای طراحی وب – افزودن محتوای متغیر Best Resources for Web Design – Adding Placeholder Content

• بهترین منابع برای طراحی وب – افزودن محتوای متغیر Best Resources for Web Design – Adding Placeholder Content

• تغییرات و تنظیمات وب سایت Website Tweaks and Adjustments

• تغییرات و تنظیمات وب سایت Website Tweaks and Adjustments

• بررسی وب سایت پاسخگو Float Float Responsive Website Review

• بررسی وب سایت پاسخگو Float Float Responsive Website Review

وب سایت CSS Flexbox با موارد زیر منوی نوار ناوبری پاسخگو CSS Flexbox Website with Responsive Navbar Sub-Menu Items

وب سایت CSS Flexbox با موارد زیر منوی نوار ناوبری پاسخگو CSS Flexbox Website with Responsive Navbar Sub-Menu Items

• Complex Responsive Navbar معرفی Complex Responsive Navbar Introduction

• Complex Responsive Navbar معرفی Complex Responsive Navbar Introduction

• برنامه ریزی و راه اندازی وب سایت برای طراحی وب سایت مدرن – Flexbox Website Planning and Setup for Modern Website Design – Flexbox

• برنامه ریزی و راه اندازی وب سایت برای طراحی وب سایت مدرن – Flexbox Website Planning and Setup for Modern Website Design – Flexbox

• ایجاد یک وب سایت با استفاده از CSS برای وب سایت ها با استفاده از Flexbox Creating a Website by Applying CSS for Websites Using Flexbox

• ایجاد یک وب سایت با استفاده از CSS برای وب سایت ها با استفاده از Flexbox Creating a Website by Applying CSS for Websites Using Flexbox

• طراحی وب سایت Mobile-First: ایجاد یک نوار ناوبری پاسخگو Mobile-First Website Design: Creating a Responsive Navbar

• طراحی وب سایت Mobile-First: ایجاد یک نوار ناوبری پاسخگو Mobile-First Website Design: Creating a Responsive Navbar

• Mobile-First Design: ایجاد یک نوار ناوبری پاسخگو با آیتم های منو Mobile-First Design: Creating a Responsive Navbar with Menu Items

• Mobile-First Design: ایجاد یک نوار ناوبری پاسخگو با آیتم های منو Mobile-First Design: Creating a Responsive Navbar with Menu Items

• افزودن جاوا اسکریپت: ایجاد یک جاوا اسکریپت تعاملی Navbar Toggler Adding JavaScript: Creating an Interactive JavaScript Navbar Toggler

• افزودن جاوا اسکریپت: ایجاد یک جاوا اسکریپت تعاملی Navbar Toggler Adding JavaScript: Creating an Interactive JavaScript Navbar Toggler

• منوی چند لایه پیچیده تر با موارد زیر منو: اضافه کردن منوی فرعی نوار نوار More Complex Multiple Layer Menu with Sub-Menu Items: Adding Navbar Sub-Menu

• منوی چند لایه پیچیده تر با موارد زیر منو: اضافه کردن منوی فرعی نوار نوار More Complex Multiple Layer Menu with Sub-Menu Items: Adding Navbar Sub-Menu

• نوار ناوبری پاسخگو با موارد زیر منو - جاوا اسکریپت زیر منوی نوار ناوبری Responsive Navbar with Sub-Menu Items – Navbar Sub-Menu JavaScript

• نوار ناوبری پاسخگو با موارد زیر منو - جاوا اسکریپت زیر منوی نوار ناوبری Responsive Navbar with Sub-Menu Items – Navbar Sub-Menu JavaScript

• منوی پاسخگو با آیتم های زیرمنو – ترفندها و به روز رسانی های وب سایت Responsive Menu with Sub-Menu Items – Website Tweaks and Updates

• منوی پاسخگو با آیتم های زیرمنو – ترفندها و به روز رسانی های وب سایت Responsive Menu with Sub-Menu Items – Website Tweaks and Updates

• نمای کلی نوار ناوبری پاسخگو پیچیده Complex Responsive Navbar Overview

• نمای کلی نوار ناوبری پاسخگو پیچیده Complex Responsive Navbar Overview